import React, { Component } from 'react';
import {
	StyleSheet, Text, Animated, View, TouchableOpacity, Image
} from "react-native";
import moment from 'moment';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import MethodUtil from '../../../../utils/MethodUtil';
import { PriceTypeUI } from '../../../../component/ui/PriceTypeUI';
import Utils from '../../../../utils/utils';

const scale = GLOBAL.SCALE;
const arrowIcon = require('../../../../imgs/order/down.png')
const copyIcon = require('../../../../imgs/copyIcon.jpg')
export class ResourceListItemCard extends Component {
	constructor(props) {
		super(props);
		this.state = {
			itemData: {},
			listData: [],
			imgObj: new Animated.Value(0)
		}
	}

	componentWillReceiveProps(props) {
		const { listData, itemData } = props;
		this.setState({
			listData,
			itemData
		})
	}

	componentWillMount() {
		const { listData, itemData } = this.props;
		this.setState({
			listData,
			itemData
		})
	}

	dateFormat(date) {
		return date ? `${moment(date).format('YYYY/MM/DD')} ${date.substring(11)}` : ''
	}

	// 商品展开和隐藏
	toggleProduct = (index, currentHeight, openHeight) => {
		let { listData, imgObj } = this.state;
		listData[index].showItem = !listData[index].showItem;
		Animated.spring(currentHeight, {
			duration: 300,
			toValue: listData[index].showItem ? openHeight * scale : 112 * scale,
		}).start();
		Animated.timing(imgObj, { toValue: listData[index].showItem ? 1 : 0, duration: 300 }).start()
		this.props.resetListData(listData)
	}

	_formatPrice = (data) => {
		let { priceType, bizModel, price, offerBottomPrice } = data;
		if (priceType == 2 || bizModel == 'MZ' || bizModel == 'M') {
			if (!Utils.isEmpty(price)) {
				return MethodUtil.toThousands(price || 0, 2)
			} else {
				return '-';
			}
		} else {
			return MethodUtil.toThousands(offerBottomPrice || 0, 2);
		}
	}

	render() {
		let { copyPress } = this.props;
		let { imgObj, itemData } = this.state;
		let item = itemData.item;
		let { createTime, packageApplyPeriodGoodsListTOS, statusName, periodNum, bizModelName, resourceCount, totalNum,
			totalAmount, priceType, bizModel } = item;
		let currencyName = packageApplyPeriodGoodsListTOS && packageApplyPeriodGoodsListTOS.length ? packageApplyPeriodGoodsListTOS[0].currencyTypeName : '元';
		const spin = imgObj.interpolate({
			inputRange: [0, 1],//输入值
			outputRange: ['0deg', '180deg'] //输出值
		})
		return (
			<View style={{ marginTop: 20 * scale, paddingLeft: 12 * scale, paddingRight: 12 * scale }}>
				<View style={styles.itemTimeData}>
					<Text style={styles.itemLightText}>{this.dateFormat(createTime)}</Text>
				</View>
				<TouchableOpacity style={styles.itemWrap} activeOpacity={.6} onPress={() => { this.props.itemPress && this.props.itemPress() }}>
					<View style={styles.itemName} >
						<Text style={styles.itemBoldTitle}>{`${bizModelName || '-'} | 场次：${periodNum || '-'}`}</Text>
						<Text style={styles.itemTitleStatus}>{statusName || '-'}</Text>
					</View>
					<View style={styles.itemBorder}></View>
					<Animated.View style={[styles.itemBody, packageApplyPeriodGoodsListTOS && packageApplyPeriodGoodsListTOS.length > 2 ? { height: item.boxHeight, overflow: 'hidden' } : '']}>
						{
							packageApplyPeriodGoodsListTOS && packageApplyPeriodGoodsListTOS.length && packageApplyPeriodGoodsListTOS.map((good, index) => {
								let { goodsName, price, currencyTypeName, uomName, maxCanSellNum, udPrice, offerBottomPrice } = good || {};
								//let finalUdPrice = bizModel == 'Z' || bizModel == 'DD' ? offerBottomPrice : udPrice;
								//暂定价：展示升贴水，一口价：即买即中-MZ、多轮-M展示含税单价，其余为报盘底价
								let finalPrice = this._formatPrice({ priceType, bizModel, price, offerBottomPrice });
								return (
									<View key={index} style={styles.productItem}>
										<View style={styles.productItemInfo}>
											<View style={{ flexDirection: 'row', alignItems: 'center', maxWidth: 160 * scale }}>
												<Text style={styles.productItemName}>{goodsName || '-'}</Text>
												<PriceTypeUI data={{ priceType }} styleObj={{ marginBottom: 12 * scale }} />
											</View>
											<Text style={styles.productItemName}>¥{finalPrice || '-'}{currencyTypeName || '元'}/{uomName || '吨'}</Text>
										</View>
										<Text style={styles.productItemTips}>{maxCanSellNum && maxCanSellNum.toFixed(3) || '-'}{uomName || '吨'}</Text>
									</View>
								)
							})
						}
					</Animated.View>
					{
						packageApplyPeriodGoodsListTOS && packageApplyPeriodGoodsListTOS.length > 2 ? (
							<TouchableOpacity activeOpacity={1} style={styles.toggleImg} onPress={() => this.toggleProduct(itemData.index, item.boxHeight, item.openHeight)}>
								<Animated.Image style={[styles.downImg, { transform: [{ rotateX: spin }] }]} source={arrowIcon} ></Animated.Image>
							</TouchableOpacity>
						) : null
					}
					<View style={{ marginBottom: 15 * scale, marginTop: 10 * scale, }}>
						<View style={styles.itemBorder}></View>
						<View style={styles.itemDayTime}>
							<TouchableOpacity activeOpacity={.8} onPress={() => { copyPress && copyPress() }} style={{ flexDirection: 'row', justifyContent: 'flex-start', padding: 4 * scale }}>
								<Image style={styles.downImg} source={copyIcon} />
								<Text style={styles.itemCommonText}>复制场次</Text>
							</TouchableOpacity>
							<Text style={styles.itemdown}>共{resourceCount || '-'}件，合计{totalNum && totalNum.toFixed(3) || '-'}吨，{MethodUtil.toThousands(totalAmount || 0, 2)}{currencyName}</Text>
						</View>
					</View>
				</TouchableOpacity>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	itemLightText: {
		fontSize: 12 * scale,
		color: '#272727',
		fontWeight: '500',
	},
	itemTimeData: {
		marginBottom: 7 * scale,
		flexDirection: 'row',
		justifyContent: 'flex-end',
	},
	itemDayTime: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		flexWrap: 'wrap',
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale
	},
	itemCommonText: {
		fontSize: 12 * scale,
		color: style.color.themeColor
	},
	itemWrap: {
		backgroundColor: '#fff',
		width: '100%',
		borderRadius: 8 * scale,
		marginTop: 6 * scale,
		paddingTop: 14 * scale,
	},
	itemName: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		paddingBottom: 15 * scale,
		paddingTop: 5 * scale,
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
	},
	itemBoldTitle: {
		fontSize: 12 * scale,
		color: '#272727',
		fontWeight: '900',
	},
	itemTitleStatus: {
		fontSize: 12 * scale,
		fontWeight: 'bold',
		color: style.color.lightRed,
		paddingRight: 7 * scale,
		paddingLeft: 7 * scale,
		paddingTop: 4 * scale,
		paddingBottom: 4 * scale,
	},
	itemBorder: {
		height: 1 * scale,
		backgroundColor: '#E3E7F0',
		marginBottom: 15 * scale,
	},
	productItem: {
		flexDirection: 'column',
		justifyContent: 'center',
		paddingTop: 10 * scale,
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale
	},
	productItemName: {
		fontSize: 13 * scale,
		fontWeight: 'bold',
		marginBottom: 12 * scale
	},
	productItemInfoText: {
		fontSize: 11 * scale,
		fontWeight: 'bold',
	},
	productItemInfoTip: {
		fontSize: 11 * scale,
		fontWeight: 'bold',
		color: style.color.orange,
		backgroundColor: '#fbefe8',
		paddingTop: 4 * scale,
		paddingBottom: 4 * scale,
		paddingLeft: 6 * scale,
		paddingRight: 6 * scale,
		marginLeft: 8 * scale,
		borderRadius: 6 * scale
	},
	productItemInfo: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	productItemTips: {
		fontSize: 11 * scale,
		lineHeight: 12 * scale,
		textAlign: 'right',
		opacity: .9,
		marginBottom: 12 * scale
	},
	toggleImg: {
		width: '100%',
		flexDirection: 'row',
		justifyContent: 'center'
	},
	downImg: {
		width: 12 * scale,
		height: 12 * scale,
		marginRight: 4 * scale
	},
	itemdown: {
		fontSize: 11 * scale
	},
	itemBody: {
		position: 'relative',
		overflow: 'hidden',
		backgroundColor: '#fff'
	}
})